<template>
	<div class="home-order">
		<div class="order-type-list">
			<div v-for="item in typeList" class="order-type" :class="{'active': active == item.key}" :key="item.key" @click="getOrderInfo(item.key)">{{item.text}}</div>
		</div>
		<mt-tab-container v-model="active" :swipeable="true">
			<mt-tab-container-item v-for="item in typeList" :key="item.key" :id="item.key" v-if="active == item.key">
				<div class="store-item" v-for="(itemInfo,$index) in orderInfoList" :key="itemInfo.order_id">
					<div class="store-info">
						<div class="flexbox flex-middle">
							<img class="store-icon" :src="itemInfo.store_logo" />
							<!--<router-link :to="{path: '/store?storeId=' + itemInfo.store_id}">-->
							<span class="store-name">{{itemInfo.store_name}}</span>
							<i class="iconfont icon-rightarrow"></i>
							<!--</router-link>-->
						</div>
						<span>{{api.getArrItem(typeList,itemInfo.orderType,'key','text')}}</span>
					</div>
					<div class="product-item" v-for="(productInfo,$idx) in itemInfo.productInfo" :key="productInfo.id">
						<router-link :to="{path: '/product_detail?id=' + productInfo.id}">
							<div class="product-info">
								<img :src="productInfo.goods_main_photo" class="product-img" />
								<div class="product-detail">
									<p class="product-name">{{productInfo.productName}}</p>
									<p class="product-type">{{productInfo.productType}}</p>
									<div class="product-price">
										<span class="now-price">￥{{productInfo.price}}</span>
										<!--<span class="prime-price" v-if="productInfo.price !== productInfo.productPrimePrice">￥{{productInfo.productPrimePrice}}</span>-->
										<span class="product-num">&times;{{productInfo.goodsNum}}</span>
									</div>
								</div>
							</div>
						</router-link>
					</div>
					<span>删除订单</span>
					<span>取消订单</span>
					<span>评价</span>
				</div>
			</mt-tab-container-item>
		</mt-tab-container>
	</div>
</template>

<script>
	import { MessageBox, Toast } from 'mint-ui';
	export default {
		name: 'order',
		data() {
			return {
				typeList: [{
					text: '待付款',
					key: 'order_submit'
				}, {
					text: '待发货',
					key: 'order_pay'
				}, {
					text: '待收货',
					key: 'order_shipping'
				}, {
					text: '待评价',
					key: 'evaluate'
				}, {
					text: '全部订单',
					key: 'all'
				}],
				active: this.$route.query.type || 'unpay',
				orderInfoList: {}
			}
		},
		methods: {
			handleChangeOrderType(type, data) {
				this.active = type;
				this.orderInfoList = data;
			},
			getOrderInfo(status) {
				this.$http.post('/moblieorderbuyer/buyer/order.htm', {
					currentPage: 1,
					order_status: status
				}).then(res => {
					if(res.code == 0) {
						this.handleChangeOrderType(status, res.data);
					}
				})
			},
			deleteOrder(row) {
				MessageBox.confirm('确定从购物车中删除该商品?').then(action => {
					this.$http.post('/moblieorderbuyer/buyer/order_delete.htm', {
						id: row.id
					}).then(res => {
						if(res.code == 0) {
							Toast('成功');
							this.getOrderInfo(this.active);
						}
					})
				}).catch(res => {});
			},
			quitOrder(row) {
				MessageBox.prompt('请填写原因').then(({
					value,
					action
				}) => {
					console.log(action)
				});
			}
		},
		created() {
			this.active = this.$route.query.type;
			this.api.setHeader('我的订单');
			this.getOrderInfo(this.$route.query.type);
		}
	}
</script>

<style lang="less">
	.home-order {
		.mint-tab-container-item {
			background-color: #DFDFDF;
		}
		.order-type-list {
			display: flex;
			border-bottom: 1px solid #DFDFDF;
			line-height: 0.8rem;
			.order-type {
				flex: 1;
				text-align: center;
				font-size: 0.24rem;
				&.active {
					border-bottom: 2px solid #E4393C;
				}
			}
		}
		.store-item {
			margin-bottom: 0.2rem;
			background-color: #FFFFFF;
			&:last-child {
				margin-bottom: 0;
			}
		}
		.store-info {
			font-size: 0.24rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 0.24rem;
			border-bottom: 1px solid #DFDFDF;
			padding: 0.15rem 0;
			padding-right: 0.24rem;
			.iconfont {
				font-size: 0.24rem;
			}
		}
		.store-icon {
			width: 0.24rem;
			margin-right: 0.2rem;
		}
		.store-name {
			font-size: 0.24rem;
		}
		.product-item {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #DFDFDF;
			height: 2rem;
			padding-left: 0.24rem;
		}
		.product-info {
			display: flex;
			width: 100%;
			height: 2rem;
			font-size: 0.24rem;
			&>div {
				padding: 0.15rem 0;
			}
			.product-img {
				padding: 0.15rem 0;
				max-width: 2.5rem;
				margin-right: 0.2rem;
				display: block;
			}
			.product-detail {
				width: calc(~'100% - 2.9rem');
				position: relative;
				.product-name {
					font-size: 0.28rem;
					color: #363636;
				}
				.product-type {
					color: #CCCCCC;
					font-size: 0.24rem;
					position: absolute;
					left: 0;
					bottom: 0.6rem;
				}
				.product-price {
					position: absolute;
					left: 0;
					bottom: 0.21rem;
					right: 0;
					.now-price {
						font-size: 0.28rem;
						color: #E4393C;
					}
					.prime-price {
						text-decoration: line-through;
						color: #CCCCCC;
						font-size: 0.24rem;
					}
					.product-num {
						float: right;
						color: #CCCCCC;
					}
				}
			}
			/*.product-num {
				width: 0.7rem;
				display: inline-flex;
				align-items: center;
				justify-content: flex-end;
				color: #CCCCCC;
			}*/
		}
	}
</style>